<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>新增用户</title>
  {% include 'rbac/common/add-edit-header.html' %}
</head>
<body>
<form
  class="layui-form"
  lay-filter="user-add-form"
  id="user-add-form"
  action=""
  style="padding: 15px"
>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">上传头像:</label>
      <div class="layui-input-block">
        <div class="layui-btn-container" style="display: flex; justify-content: space-between; align-items: center;">
          <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-choose">
            <i class="layui-icon layui-icon-upload"></i> 选择头像并预览!!
          </button>
          <button type="button" class="layui-btn" id="ID-upload-demo-action">开始上传</button>
          <span class="layui-form-mid layui-text-em">
            <i class="layui-icon layui-icon-tips" lay-tips="若您不点击'开始上传',那么将会使用默认头像!!"></i>
          </span>
        </div>
        <div style="width: 132px;">
          <div class="layui-upload-list">
            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">昵称:</label>
      <div class="layui-input-inline">
        <input name="nickname" value="" lay-verify="required" autocomplete="off" placeholder="请输入昵称" class="layui-input"
               type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">性别:</label>
      <div class="layui-input-block">
        <input type="radio" name="gender" value="1" title="男" lay-filter="demo-radio-filter" checked>
        <input type="radio" name="gender" value="2" lay-filter="demo-radio-filter" title="女">
        <input type="radio" name="gender" value="3" lay-filter="demo-radio-filter" title="保密">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">用户名:</label>
      <div class="layui-input-inline">
        <input name="username" value="" lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input"
               type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">手机号:</label>
      <div class="layui-input-inline">
        <input name="mobile" value="" lay-verify="required|phone" autocomplete="off" placeholder="请输入手机号" class="layui-input"
               type="text">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">密码:</label>
      <div class="layui-input-inline">
        <input name="password" value="" lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input"
               type="password" lay-affix="eye">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">重复密码:</label>
      <div class="layui-input-inline">
        <input name="repassword" value="" lay-verify="required" autocomplete="off" placeholder="请输入重复密码" class="layui-input"
               type="password" lay-affix="eye">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">邮箱:</label>
      <div class="layui-input-inline">
        <input name="email" value="" lay-verify="required|email" autocomplete="off" placeholder="请输入邮箱" class="layui-input"
               type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">职位:</label>
      <div class="layui-input-inline">
        <input name="postion" value="" lay-verify="required" autocomplete="off" placeholder="请输入职位" class="layui-input" type="text">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">状态:</label>
      <div class="layui-input-inline">
        <input
          type="checkbox"
          name="is_enabled"
          lay-skin="switch"
          lay-filter="user-row-status"
          checked
          title="启用|禁用"
        />
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">所属部门:</label>
      <div class="layui-inline">
        <div id="user-dep-select" lay-tips="我们默认规定:选择公司则是CEO;选择部门则是经理或员工(因为有些部门没有分小组);选择小组则是组长或员工!"></div>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button
        type="submit"
        class="layui-btn"
        lay-submit
        lay-filter="user-add-form-btn"
      >
        立即提交
      </button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

</form>
</body>
{% include 'rbac/common/add-edit-footer.html' %}
<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["form", "popup", "combotree", "upload", "element"], function () {
    let form = layui.form;
    let popup = layui.popup;
    let $ = layui.$;
    let upload = layui.upload;
    let combotree = layui.combotree;  // 下拉呈现部门树,供新增用户选择

    // 头像预览以及上传
    let loading;
    let avatar_path;
    upload.render({
      elem: '#ID-upload-demo-choose',
      url: '/api/v1/user/avatar/', // 此处配置你自己的上传接口即可
      auto: false,
      accept: 'images',
      data: {'type':'add'},
      // multiple: true,
      bindAction: '#ID-upload-demo-action',
      // 选择图片后预览
      choose: function (obj) {
        // 预读本地文件示例,不支持ie8
        obj.preview(function (index, file, result) {
          $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
        });
      },
      // 点击向配置的url发送请求!!
      before: function (res) {
        loading = layer.load()
      },
      // 200
      done: function (res) {
        layer.close(loading);
        console.log('done', res)
        if (res.code === 0) {
          avatar_path = res.data.media_path
          popup.success("上传成功!")
        } else {
          popup.failure(res.msg)
        }
      },
      // 除200以外的 比如500
      error: function (index, upload, res, xhr) {
        layer.close(loading);
        popup.failure("上传失败!")
      }
    });

    // 所属部门 下拉选择
    let combotree_elem = '#user-dep-select'
    let combotree_url = '/api/v1/user/get_dep_select/'
    combotree_init(combotree, combotree_elem, combotree_url)

    // 新增表单提交
    form.on("submit(user-add-form-btn)", function (data) {
      data.field.is_enabled = data.field.is_enabled === "on";
      data.field.avatar = avatar_path
      data.field.department = data.field["user-dep-select"]
      console.log(data.field)

      let url = "/api/v1/user/add/"
      let d = data.field
      let reload_table = "user-table"
      addAndEditAjaxRequest(popup, url, d, reload_table)
      return false;
    });
  });
</script>
</html>
